<template>
  <div class="injectActiveComponent">
    <div>inject组件中：</div>
    <div>
      <button @click="updateLocation">修改地区名（利用provide组件提供的方法）</button>
    </div>
    <div>
      <button @click="updateLocation1">修改地区名（直接在inject组件中修改，如果provide组件中未设置readonly，则可以修改成功）</button>
    </div>
    <div>地区名：{{ userLocation }}</div>
    <div>经纬度： {{ JSON.stringify(userGeolocation, null, 2) }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject } from "vue";

export default defineComponent({
  setup() {
    const userLocation = inject("locationName", "默认值");
    const userGeolocation = inject("geolocation");
    const updateLocation: any = inject("updateLocation");

    return {
      userLocation,
      userGeolocation,
      updateLocation,
    };
  },
  props: {
    position: {
      type: String,
      required: true,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    updateLocation1() {
      this.userLocation = "肇庆";
    },
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.injectActiveComponent {
  margin-top: 20px;
}
</style>
